<template>
  <basePage :show-tabbar="false" :page-params="pageParams">
    <view class="list-bg">
      <view class="pop-title">
        <view class="title">资质文件</view>
        <view
          class="close"
          @click="closePopFn"
        >
          <image
            class="close-icon"
            src="/static/image/close.png"
          />
        </view>
      </view>
      <view class="pop-content">
        <text>发票类型</text>
        <view class="choice">
          <view
            v-for="(item, index) in quaList"
            :key="index"
            :class="newObj.needQualificationChoosen == item.code ? 'radioDefault radioAcitve' : 'radioDefault'"
            @click="changeRadio('needQualificationChoosen', item.code)"
          >{{ item.name }}</view>
        </view>
        <view v-if="newObj.needQualificationChoosen == 10">
          <text>盖红章（资质文件红章由鑫方盛提供）</text>
          <view class="choice">
            <view
              v-for="(item, index) in flagList"
              :key="index"
              :class="newObj.needRedChapter == item.code ? 'radioDefault radioAcitve' : 'radioDefault'"
              @click="changeRadio('needRedChapter', item.code)"
            >{{ item.name }}</view>
          </view>
          <text>资质份数</text>
          <view class="choice">
            <view
              v-for="(item, index) in NumList"
              :key="index"
              :class="newObj.qualificationNum == item.code ? 'radioDefault radioAcitve' : 'radioDefault'"
              @click="changeRadio('qualificationNum', item.code)"
            >{{ item.name }}</view>
          </view>
        </view>
        <view class="button" @click="confirmFn">确定</view>
      </view>
    </view>
  </basePage>
</template>

<script>
import basePage from '@/components/base-page';
export default {
  components: {
    basePage
  },
  props: {
    orderInfo: {
      type: Object,
      default: null
    },
  },
  data() {
    return {
      title: 'Index',
      pageParams: {
        // state: 'ERROR',
        emptyTitle: '信号可能跑到外星球了哦～',
        errorTitle: '请求失败',
        showButton: true
      },
      quaList: [
        { name: '需要资质', code: 10 },
        { name: '不需要资质', code: 20 },
      ],
      flagList: [
        { name: '是', code: 10 },
        { name: '否', code: 20 },
      ],
      NumList: [
        { name: '1', code: 1 },
        { name: '2', code: 2 },
        { name: '3', code: 3 },
        { name: '4', code: 4 },
      ],
      newObj: {
        qualificationNum: 1,
        needRedChapter: 10,
        needQualificationChoosen: 10
      }
    }
  },
  computed: {
    curOrderInfo() {
      return this.orderInfo
    }
  },
  mounted() {
    this.newObj = { ...this.newObj, ...this.curOrderInfo }
  },
  methods: {
    confirmFn() {
      var orderInfo = { ...this.curOrderInfo, ...this.newObj }
      this.$emit('update:orderInfo', orderInfo)
      this.$emit('closeFication', orderInfo)
      this.$emit('closePopFn')
    },
    closePopFn() {
      this.$emit('closePopFn')
    },
    changeRadio(type, code) {
      this.newObj[type] = code
    }
  }
}
</script>

<style scoped lang="scss">
@import "../static/scss/index";
.list-bg{
  height: 1122rpx;
  position: relative;
  .pop-content{
    padding: 22rpx 32rpx;
    box-sizing: border-box;
    text {
      color: #999999;
      font-size: 24rpx;
      font-weight: 400;
      margin-top: 48rpx;
      display: block;
    }
    text:first-child {
      margin-top: 22rpx;
    }
    .choice {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin-top: 16rpx;
    }
    .radioDefault {
      padding: 16rpx 52rpx;
      background: #F9F9F9;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      border-radius: 8rpx;
      box-sizing: border-box;
      font-size: 28rpx;
      font-weight: 400;
      flex-shrink: 0;
      margin-left: 16rpx;
      border: 1rpx solid #F9F9F9;
    }
    .radioDefault:first-child {
      margin-left: 0;
    }
    .radioAcitve {
      border: 2rpx solid #FF5533;
      color:$uni-orange;
      background:$uni-white;
      box-sizing: border-box;
    }
    .button {
      width: 624rpx;
      height: 64rpx;
      border-radius: 8rpx;
      background: linear-gradient(128.8deg, rgba(255,121,95,1) 0%, rgba(238,61,26,1) 100%);
      position: absolute;
      bottom: 60rpx;
      left: 64rpx;
      color: #FFFFFF;
      font-size: 28rpx;
      font-weight: 400;
      display: flex;
      justify-content: center;
      align-items: center;
      align-content: center;
    }
  }
}
</style>
